<template>
	<div class="wrapper">
		<el-row>
			<el-col :span="24">
				<common-card>
					<template #header>
						<div style="font-family: Roboto-Thin; padding: 20px; color: #fff">
							<span style="font-size: 20px; display: inline-block; width: 100%">小组列表</span>
							<span style="font-size: 14px; display: inline-block; width: 100%; margin-top: 10px">所有小组</span>
						</div>
					</template>
					<template #main>
						<el-row style="margin-bottom: 15px" type="flex" align="middle">
							<el-button v-if="isTeacher" class="btn" type="primary" plain icon="el-icon-plus" circle size="mini" @click="addDepartment" style="margin-right: 10px"/>
							<el-button v-if="isTeacher" class="btn" type="primary" size="mini" style="margin-right: 10px" @click="openClassGroupDialog(true)">根据班级生成小组</el-button>
							<el-input
								clearable
								size="mini"
								@input="handlesearch"
								class="tableSearch"
								placeholder="小组名称"
								prefix-icon="el-icon-search"
								style="margin-right: 10px"
								v-model="searchGroup">
							</el-input>
							<el-input
								clearable
								size="mini"
								@input="handlesearch"
								class="tableSearch"
								placeholder="导师名称"
								prefix-icon="el-icon-search"
								v-model="searchTeacher">
							</el-input>
						</el-row>
						<el-table
							v-loading="tableLoading"
							:max-height="height"
							:data="tableData"
							stripe
							style="width: 100%">
							<el-table-column
								prop="groupName"
								label="小组名称">
							</el-table-column>
							<el-table-column
								prop="teachername"
								label="导师名称">
							</el-table-column>
							<el-table-column
								label="操作"
								width="180"
								v-if="isTeacher">
								<template slot-scope="scope">
									<el-button
										@click="editDepartment(scope.row)"
										icon="el-icon-setting"
										type="primary"
										plain
										circle
										size="small">
									</el-button>
									<el-button
										@click="deleteDepartment(scope.row)"
										icon="el-icon-delete"
										type="danger"
										plain
										circle
										size="small">
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</template>
				</common-card>
			</el-col>
		</el-row>
		<add-dialog :dialog-visible="isAdd" :is-edit="isEdit" @closeDialog="isOpenDialog(false)" :department-data="departmentData" @fresh="fetchgroupList"/>
		<class-group :dialog-visible="isAdd1" @closeDialog="openClassGroupDialog(false)" @fresh="fetchgroupList"></class-group>
	</div>
</template>

<script>
  import CommonCard from '../../components/Cards/CommonCard';
  import addDialog from './addDialog'
  import classGroup from './classGroup'
  import scoreManage from '@/api/scoreManage';
  import * as groupManage from '@/api/groupManage';
  import Cookie from "js-cookie";
  // import * as college from '@/api/college';

  export default {
    name: 'index',
    components: {
      CommonCard,
      addDialog,
      classGroup
    },
    data () {
      return {
        total: 0,
        currentPage: 1,
        departmentData: {},
        searchGroup: '',
        searchTeacher: '',
        tableLoading: true,
        height: '',
        isAdd: false,
        isAdd1: false,
        isEdit: false,
        tableData: [],
        options: [],
		  isTeacher: false,
      }
    },
    methods: {
      async handlesearch () {
        let req = {}
        if (this.searchGroup && this.searchTeacher) {
          req = {
            groupname: this.searchGroup,
            teachername: this.searchTeacher
          }
        } else if (!this.searchGroup && this.searchTeacher) {
          req = {
            teachername: this.searchTeacher
          }
        } else if (this.searchGroup && !this.searchTeacher) {
          req = {
            groupname: this.searchGroup
          }
        }
        const res = await groupManage.fetchGroupList(req);
        this.tableData = res.msg;
      },
      addDepartment () {
        this.isOpenDialog(true, false);
      },
      async deleteDepartment (data) {
        try {
          await this.$confirm('此操作将永久删除该小组, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          });
          await groupManage.deleteGroup(data.groupid);
          this.$notify({
            title: '信息',
            type: 'success',
            message: '删除成功!'
          });
          await this.fetchgroupList();
        } catch (e) {
          console.log(e)
        }
      },
      async fetchgroupList () {
        try {
          this.tableLoading = true
          const res = await groupManage.fetchGroupList({});
          this.tableData = res.msg;
        } catch (e) {
          console.log(e)
        } finally {
          this.tableLoading = false;
        }
      },
      async editDepartment (data) {
        try {
          console.log(data)
          this.departmentData = data;
          this.isOpenDialog(true, true);
        } catch (e) {
          console.log(e);
        }
      },
      isOpenDialog (isOpen, isEdit) {
        this.isAdd = isOpen;
        this.isEdit = isEdit;
      },
      openClassGroupDialog (status) {
        this.isAdd1 = status
      },
		async getTeacherInfo(){
			let resInfo = JSON.parse(Cookie.get("userInfo"));
			console.log(resInfo);
			if (resInfo.role === 2){
				this.studentid = resInfo.token;
			}else if (resInfo.role === 1){
				console.log('teacherOK');
				this.teacherusername = resInfo.token + "";
				console.log(resInfo.token);
				console.log(this.teacherusername);
				if (this.teacherusername){
					this.isTeacher = true;
					console.log(this.isTeacher);
				}
				console.log(this.teacherID);
			}
		},
    },

    created () {
      this.height = window.innerHeight - 150;
      this.fetchgroupList();
      this.getTeacherInfo();
    }
  }
</script>

<style scoped>
  .wrapper {
    padding: 0 15px;
  }
  .tableSearch {
    width: 221px;
  }
  .tableSearch >>> .el-input__inner {
    border-radius: 415px;
  }
  .btn {
    margin-right: 7px;
  }
</style>